// Suppression d'une zone OK'
// Modif des infos zones OK
// Création de zone OK
// Suppression de zone lorsqu'il y en a plusieurs OK
// Modif des épingles d'une zone OK


function Epingle(pobjet, px, py)
{
    this.objet = pobjet;
    this.x = px;
    this.y = py;
}

function Zone(pobjet, pepingles, zoneBean, pstroke)
{
    this.objet = pobjet;
    this.pins = pepingles;
    this.bean = zoneBean;
    this.removed = false;
    this.stroke = pstroke;
    this.setObjet = function(polygon)
    {
        this.objet = polygon;
    }
}

function ZoneBean(idZone, designationZone, detailsZone, commZone, pathZone, dispo, attributions, places)
{
    this.id = idZone;
    this.designation = designationZone;
    this.details = detailsZone;
    this.commentaires = commZone;
    this.path = pathZone;
    this.dispo = dispo;
    this.attributions = attributions;
    this.places = places;
}

function MapBean(idMap, designationMap, dateMaxMap)
{
    this.id = idMap;
    this.designation = designationMap;
    this.dateMax = dateMaxMap;
}

var canvasSize = 600;
var mapWidth = 0;
var mapHeight = 0;
var currentZoom = 0;
var createMode= false;
var editMode= false;
var moveMode = false;
var pinMoveMode = false;
var pinMoved = false;
var debugMode = false;
// Coordonnée Y d'origine du canvas/map par rapport à la page
var repereYcanvas; 
// Coordonnée X d'origine du canvas/map par rapport à la page
var repereXcanvas;

// Canvas
var paper;
// Carte format image
var map;

var pinWidth = 40;
var pinXmargin = 28;
var pinYmargin = -10;
var pinXpointer = 12;
var pinYpointer = 30;
var initialMouseDownX;
var initialMouseDownY;
var initialMouseDownPinX = 0;
var initialMouseDownPinY = 0;
var mapXmove = 0;
var mapYmove = 0;
// Tableau des épingles sur la carte
var epingles = new Array();
// Tableau 
var tempStroke = new Array();
// Tableau des zones (polygones) créés
var zones = new Array();
// Index de la zone active dans le tableau des zones créées
var selectedZoneCursor = null;
// Zone survolée par la souris dans le tableau des zones créées
var mouseOverZone = null;
// Epingle survolée par la souris dans le tableau des zones créées
var mouseOverPin = null;
// Epingle active
var selectedPin = null;
// Index de la carte dans l'accordéon
var MAP_ACCORDION_INDEX = 0;

// XML Request for Ajax use
var xmlHttp;

// Instance de la carte
var mapBean = null;
// Couleur d'une zone disponible
var zoneDispocolorCode = "green";
var zoneNotDispocolorCode = "red";
// Contexte de l'application
var context;
// Référence au fond de carte
var mapFilePath;



//////////////////////////////////// IMPLEMENTATION ////////////////////////////




$(document).ready(function() {  
    
    createXmlHttpRequest();
    
    
    $(".cb-enable").click(function(){
        checkButton(true);
    });
    $(".cb-disable").click(function(){
        checkButton(false);
    });

    $(function() {
		$( "#accordion" ).accordion();
    });
    $(function() {
		$( "#dateMax" ).datepicker({dateFormat: "dd/mm/yy"});
    });
    $(function() {
            $( "#slider-range-min" ).slider({
                    range: "min",
                    value: 0,
                    min: 0,
                    max: 100,
                    slide: function( event, ui ) {
                            $( "#amount" ).val( ui.value + " %" );

                    },
                    change: function(event, ui) {
                        resizeMap(ui.value);
                    }
            });
            $( "#amount" ).val($( "#slider-range-min" ).slider( "value" ) + " %");
    });
    
    // Importation du fond de carte
    paper = new Raphael(document.getElementById('canvas_container'), canvasSize + 50, canvasSize + 50);  
    
    var min = 9999;
    var ratio = 1;
    if(mapWidth > mapHeight)
    {
        min = mapHeight;
    }
    else
    {
        min = mapWidth
    }
    ratio = canvasSize / min;

    mapWidth *= ratio;
    mapHeight *= ratio;
    
    map = paper.image(mapFilePath, 0, 0, mapWidth, mapHeight);
    repereYcanvas = $("#canvas_container").offset().top - 17;
    repereXcanvas = $("#canvas_container").offset().left +2;
    
    // Désactivation du clic droit sur l'ensemble de la page
    $("#canvas_container").bind("contextmenu",function(e){
        return false;
    }); 
    
    // Listener de click sur la carte pour déposer les épingles
    map.click(function(e){
        if(selectedPin != null)
        {
            selectPin(selectedPin);
            selectedPin = null;
        }
        // Désactive les objets présents sur la carte grâce à un clic sur la carte
        if(selectedZoneCursor != null && (editMode != true && createMode != true))
        {
            setZoneUnselected(true, zones[selectedZoneCursor].objet);
            selectedZoneCursor = null;
        }
        if(createMode && $("#pinMenu").css("display") == "none")
        {
            createPin((e.pageX - repereXcanvas - pinWidth + pinXmargin), (e.pageY - repereYcanvas - pinWidth + pinYmargin));
//            if(epingles.length > 1)
//            {
//                var line = buildStroke(epingles[epingles.length-2].objet.attr("x") + pinXpointer, 
//                                        epingles[epingles.length-2].objet.attr("y") + pinYpointer, 
//                                        epingles[epingles.length-1].objet.attr("x") + pinXpointer, 
//                                        epingles[epingles.length-1].objet.attr("y") + pinYpointer);
//                drawStroke(line);
//            }
        }
    });

    // Listener de déplacement à la souris de la carte
        // Début du déplacement lorsque la souris est clickée
        $("#canvas_container").mousedown(function(e){
            if(!pinMoveMode)
            {
                moveMode = true;
                initialMouseDownX = e.clientX;
                initialMouseDownY = e.clientY;
            }
        });
        // Fin du déplacement quand le click est relaché
        $("#canvas_container").mouseup(function(e){
            moveMode = false;
        });
        // Déplacement en cours suivant les mouvements de la souris
        $("#canvas_container").mousemove(function(e){
            if(moveMode)
            {
                moveEverything(e.clientX - initialMouseDownX, e.clientY - initialMouseDownY);
                initialMouseDownX = e.clientX;
                initialMouseDownY = e.clientY;
            }
        });
        
        $('#debugBtn').click(function() {
            if(debugMode == false)
            {
                debugMode = true;
            }
            else
            {
                debugMode = false;
            }        
        });
        
        $(window).resize(function () {
            repereYcanvas = $("#canvas_container").offset().top - 17;
            repereXcanvas = $("#canvas_container").offset().left +2;
        });
});


function zoneEdition()
{
    if(editMode == false)
    {
        if(selectedZoneCursor != null)
        {
            editMode = true;
            makeZoneEditable();
            checkButton(true);
        }
    }
}

function zoneRemove()
{
    if(editMode == false && selectedZoneCursor != null)
    {
        removeZoneMenu((parseInt(selectedZoneCursor) + parseInt(1)));
        zoneRemoveRequest(selectedZoneCursor);
        for(i in zones[selectedZoneCursor].pins)
        {
            zones[selectedZoneCursor].pins[i].objet.remove();
        }
        zones[selectedZoneCursor].objet.remove();
        zones[selectedZoneCursor].removed = true;
        selectedPin = null;
        selectedZoneCursor = null;
    }
}

function pinRemove()
{
    var found = false;
    var i = 0;
    while(i<epingles.length && found == false)
    {
        if(epingles[i].objet == selectedPin)
        {
            selectPin(epingles[i].objet);
            if(i == 0)
            {
                return;
            }
            epingles[i].objet.remove();
            epingles.splice(i, 1);
            found = true;
            return;
        }
        i++;
    }
    
    i = 0;
    
    if(editMode)
    {
        if(zones[selectedZoneCursor].pins.length > 3)
        {
            while(i<zones[selectedZoneCursor].pins.length && found == false)
            {
                if(zones[selectedZoneCursor].pins[i].objet == selectedPin)
                {
                    if(i == 0)
                    {
                        return;
                    }
                    selectPin(zones[selectedZoneCursor].pins[i].objet);
                    zones[selectedZoneCursor].pins[i].objet.remove();
                    zones[selectedZoneCursor].pins.splice(i, 1);
                    found = true;
                }
                i++;
            }
        }
    }

}

document.onclick = function(e){
    if(debugMode)
    {
        console.log("click x : " + (e.clientX-repereXcanvas) + " y : " + (e.clientY-repereYcanvas));
    }
};

function moveEverything(xMove, yMove)
{
    // Déplacement du fond de carte
    map.attr({
        x: map.attr("x") + xMove,
        y: map.attr("y") + yMove
    });
    
    mapXmove += xMove;
    mapYmove += yMove;
    
    // Déplacement des épingles
    for(i in epingles)
    {
        var x = epingles[i].objet.attr("x");
        var y = epingles[i].objet.attr("y");
        
        epingles[i].objet.attr({
            x: x + xMove*zoomLevel(),
            y: y + yMove*zoomLevel()
        });
    }
    
    // Déplacement des zones
    for(i in zones)
    {
        if(zones[i].removed == false)
        {
            for(j in zones[i].pins)
            {
                // Epingles
                x = zones[i].pins[j].objet.attr("x");
                y = zones[i].pins[j].objet.attr("y");

                zones[i].pins[j].objet.attr({
                    x: x + xMove*zoomLevel(),
                    y: y + yMove*zoomLevel()
                });
            }
            if(!(editMode && i == selectedZoneCursor))
            {
                zones[i].objet.translate(xMove*zoomLevel(), yMove*zoomLevel());
            }
        }
    }
}

// Réinitialisation des variables gérant les coordonnées des objets
function reIniVarMove()
{
    // Réinitialisation des variables de déplacement de la carte
    mapXmove = 0;
    mapYmove = 0;
    // Réinitialisation de la position des épingles sur la carte
    for(i in epingles)
    {
        epingles[i].objet.attr({
            x: epingles[i].x - pinXpointer,
            y: epingles[i].y - pinYpointer
        });
    }
    // Réinitialisation de la position des zones et de leurs épingles
    for(k in zones)
    {
        if(zones[k].removed == false)
        {
            // Epingles
            for(j in zones[k].pins)
            {
                zones[k].pins[j].objet.attr({
                    x: zones[k].pins[j].x - pinXpointer,
                    y: zones[k].pins[j].y - pinYpointer
                });
            }
        }
    }
}

// Gestion du redimensionnement de la carte en fonction du niveau de zoom
function resizeMap(value)
{
    // Réinitialisation de la taille
    var iniSizeRatio = 1/zoomLevel();
    map.scale(iniSizeRatio, iniSizeRatio, 0, 0);
    // Application du niveau de zoom
    var newSizeRatio = 1+(value/100);
    map.scale(newSizeRatio, newSizeRatio, 0, 0);
    // Replacement au point initial
    moveEverything(-mapXmove, -mapYmove);
    reIniVarMove();
    
    // Déplacement des épingles présentes sur la carte pour suivre le zoom
    for(i in epingles)
    {
        pinMove(epingles[i], newSizeRatio);
    }
    // Déplacement des zones par l'intermédiaire des épingles qui les composent
    for(k in zones)
    {
        if(zones[k].removed == false)
        {
            // Déplacement de chacune des épingles de chaque zone
            for(j in zones[k].pins)
            {
                pinMove(zones[k].pins[j], newSizeRatio);
            }
            if(!(editMode && selectedZoneCursor == k))
            {
                var oldZone = zones[k].objet;
                // Récupération du path de la zone redimensionnée via les épingles
                var path = extractGraphicPath(zones[k].pins);
                // Création de la zone en objet graphique
                var color = zoneDispocolorCode;
                if(zones[k].bean.dispo == "false")
                {
                    color = zoneNotDispocolorCode;
                }
                var pg = drawPolygon(path, color);
                zones[k].setObjet(pg);
                oldZone.remove();
            }
        }
    }
    // Mémorisation niveau de zoom
    currentZoom = value;
}

function pinMove(epingle, newSizeRatio)
{
        var x = epingle.objet.attr("x");
        var y = epingle.objet.attr("y");
        var pinXmove =  (x * newSizeRatio) + 10*(newSizeRatio-1); 
        var pinYmove = (y * newSizeRatio) + 28*(newSizeRatio-1);

        // Déplacement de l'épingle pour suivre le zoom
        epingle.objet.attr({
            x: pinXmove,
            y: pinYmove
        })
}

//function drawStroke(path)
//{
//    var stroke = paper.path(path);
//    stroke.attr({
//        stroke: '#FFFFFF',
//        fill: "red",
//        'fill-opacity': 0.3,
//        'stroke-width': 8,
//        'stroke-opacity': 1
//    });
//    return stroke;
//}
//
//function buildStroke(x1, y1, x2, y2)
//{
//    tempStroke.push(paper.path("M " + x1 + " " + y1 + " L " + x2 + " " + y2));
//}

function drawPolygon(path, color)
{
    var polygon = paper.path(path);
    polygon.attr({
        stroke: '#3b4449',
        fill: color,
        'fill-opacity': 0.3,
        'stroke-width': 0,
        'stroke-opacity': 0
    });
    
    // Listener sur zone
    polygon.click(function(e){
        selectZone(polygon);
    });
    
    $(polygon.node).bind("contextmenu", function(){
        selectZone(polygon);
    });
    
    polygon.mouseover(function(e){
        polygon.attr({
            cursor: "pointer"
        });
        mouseOverZone = polygon;
    });
    
    polygon.mouseout(function(e){
        mouseOverZone = null;
    });
    
    $(polygon.node).contextMenu({
            menu: "zoneMenu"
        },
        function(action, el, pos) {
        switch(action)
        {
            case "del":
                zoneRemove();
            break;
            case "alt":
                zoneEdition();
            break;
        }
    });
    return polygon;
}

function selectZone(zoneObject)
{
    if(!editMode)
    {
        if(selectedZoneCursor != null)
        {
            if(zones[selectedZoneCursor].objet != zoneObject)
            {
                zones[selectedZoneCursor].objet.attr({
                    'stroke-width': 0,
                    'stroke-opacity': 0
                });
                selectedZoneCursor = null;
            }
        }
        // Test si la zone est sélectionnée
        if(zoneObject.attr("stroke-width") == 0)
        {
            setZoneSelected(zoneObject);
        }
    }
}

function setZoneSelected(zone)
{
    for(i in zones)
    {
        if(zones[i].removed == false)
        {
            if(zones[i].objet == zone)
            {
                selectedZoneCursor = i;
            }
        }
    }
    // Sélection
    zone.attr({
        stroke: "red", 
        'stroke-width': 3,
        'stroke-opacity': 1
    });
    // Ouverture de la section correspondante dans l'accordéon
    openAccordionElement((parseInt(selectedZoneCursor) + parseInt(1)));
}

function setZoneUnselected(closeAll, zone)
{
    // Déselection
    zone.attr({
        'stroke-width': 0,
        'stroke-opacity': 0
    });
    // Fermeture de la section correspondante dans l'accordéon
    if(closeAll)
    {
        openAccordionElement(parseInt(MAP_ACCORDION_INDEX));
        selectedZoneCursor = null;
    }
}

function extractGraphicPath(pins)
{
    var path;
    for(i in pins)
    {
        if(i == 0)
        {
            path = "M " + (pins[i].objet.attr("x") + pinXpointer) + " " + (pins[i].objet.attr("y") + pinYpointer) + " ";
        }
        else
        {
            path += "L " + (pins[i].objet.attr("x") + pinXpointer) + " " + (pins[i].objet.attr("y") + pinYpointer) + " ";
            if(i == pins.length-1)
            {
                path += "z";
            }
        }
    }
    return path;
}

function extractGeoPath(pins)
{
    var path;
    for(i in pins)
    {
        if(i == 0)
        {
            path = "M " + Math.round(pins[i].x) + " " + Math.round(pins[i].y) + " ";
        }
        else
        {
            path += "L " + Math.round(pins[i].x) + " " + Math.round(pins[i].y) + " ";
            if(i == pins.length-1)
            {
                path += "z";
            }
        }
    }
    return path;
}

function zoomLevel()
{
    return 1+currentZoom/100;
}

function transformPinsToZone(polygon, epingles)
{
    // On rend les épingles invisibles
    for(i in epingles)
    {
        epingles[i].objet.hide();
    }
    // On stocke la zone, ses coordonnées, et ses épingles
    polygon.toBack();
    map.toBack();
}

function createZone(polygon, bean)
{
    var zone = new Zone(polygon, epingles, bean, tempStroke)
    zones.push(zone);
    // Déselection d'une éventuelle zone active
    if(selectedZoneCursor != null)
    {
        setZoneUnselected(true, zones[selectedZoneCursor].objet);
    }
    setZoneSelected(polygon);
    
    addZoneMenu(zone.bean);
    // Réinitialisation du tableau d'épingles
    epingles = new Array();
}

function createZoneBean(path)
{
    var bean = new ZoneBean(-1, "Nouvelle zone", "", "", path, zoneDispocolorCode, new Array(), "");
    zoneInsertRequest(bean);
    return bean;
}

function createPin(x, y)
{
    // Création de l'épingle
    var pin = paper.image(getPinImage(), x , y, pinWidth, pinWidth);

    // Listener sur l'épingle

    // Catch de l'épingle
    pin.mousedown(function(e){
        initialMouseDownX = e.clientX;
        initialMouseDownY = e.clientY;
        pinMoveMode = true;
    });
    // Déplacement de l'épingle
    pin.mousemove(function(e){
        
        if(pinMoveMode)
        {
            var x = pin.attr("x");
            var y = pin.attr("y");

            if(x < 0 || x > mapWidth || y < 0 || y > mapHeight)
            {
                pinMoveMode = false;
                return;
            }
            else
            {
                pin.attr({
                    x: x + (e.pageX - initialMouseDownX),
                    y: y + (e.pageY - initialMouseDownY)
                });
                pinMoved = true;
                initialMouseDownX = e.clientX;
                initialMouseDownY = e.clientY;
            }
        }
    });

    // Relachement de l'épingle
    pin.mouseup(function(e){
        if(pinMoveMode)
        {
            pinMoveMode = false;
            // Update des coordonnées de l'épingle déplacée
            if(editMode == false)
            {
                for(i in epingles)
                {
                    if(pin == epingles[i].objet)
                    {
                        epingles[i].x = (pin.attr("x") + pinXpointer)/zoomLevel() - mapXmove;
                        epingles[i].y = (pin.attr("y")+ pinYpointer)/zoomLevel() - mapYmove;
                        if(pinMoved)
                        {
                            pinSort(i, epingles);
                            pinMoved = false;
                            return;
                        }
                    }
                }
            }
            else 
            {
                for(i in zones[selectedZoneCursor].pins)
                {
                    if(pin == zones[selectedZoneCursor].pins[i].objet)
                    {
                        zones[selectedZoneCursor].pins[i].x = (pin.attr("x") + pinXpointer)/zoomLevel() - mapXmove;
                        zones[selectedZoneCursor].pins[i].y = (pin.attr("y")+ pinYpointer)/zoomLevel() - mapYmove;
                        if(pinMoved)
                        {
                            pinSort(i, zones[selectedZoneCursor].pins);
                            pinMoved = false;
                            return;
                        }
                    }
                }
            }
        }
    });
    // Terminer le détour d'une zone
    pin.dblclick(function(e){
        if(editMode == false)
        {
            if(pin == epingles[0].objet && epingles.length > 2)
            {
                var graphicPath = extractGraphicPath(epingles);
                var realPath = extractGeoPath(epingles);
                var polygon = drawPolygon(graphicPath, zoneDispocolorCode);
                transformPinsToZone(polygon, epingles);
                var bean = createZoneBean(realPath);
//                var line = buildStroke(epingles[epingles.length-1].objet.attr("x") + pinXpointer, 
//                                        epingles[epingles.length-1].objet.attr("y") + pinYpointer, 
//                                        epingles[0].objet.attr("x") + pinXpointer, 
//                                        epingles[0].objet.attr("y") + pinYpointer);
//                drawStroke(line);
                createZone(polygon, bean);
//                switchStroke("off");
//                tempStroke = new Array();
                setZoneSelected(polygon);
                checkButton(false);
            }
        }
        else
        {
            if(pin == zones[selectedZoneCursor].pins[0].objet && zones[selectedZoneCursor].pins.length > 2)
            {
                var newGraphicPath = extractGraphicPath(zones[selectedZoneCursor].pins);
                var newRealPath = extractGeoPath(zones[selectedZoneCursor].pins);
                var color = zoneDispocolorCode;
                if(zones[selectedZoneCursor].bean.dispo == "false")
                {
                    color = zoneNotDispocolorCode;
                }
                var newPolygon = drawPolygon(newGraphicPath, color);
                transformPinsToZone(newPolygon, zones[selectedZoneCursor].pins);
                zones[selectedZoneCursor].objet = newPolygon;
                zones[selectedZoneCursor].bean.path = newRealPath;
                zonePositionUpdateRequest(zones[selectedZoneCursor].bean);
                editMode = false;
                checkButton(false);
            }
        }
    });
    
    pin.click(function(e){
        selectPin(pin);
    });
    
    pin.mouseover(function(e){
        pin.attr({
            cursor: "pointer"
        });
        mouseOverPin = pin;
    });
    
    pin.mouseout(function(e){
        if(pinMoveMode)
        {
            pinMoveMode = false;
        }
        mouseOverPin = null;
    });
    
    $(pin.node).contextMenu({
            menu: "pinMenu"
        },
        function(action, el, pos) {
//            selectPin(pin);
            switch(action)
            {
                case "del":
                    pinRemove();
                break;
            }
    });
    
    // Mise en mémoire de l'épingle
    if(editMode)
    {
        var newPin = new Epingle(pin, (pin.attr("x") + pinXpointer)/ zoomLevel(), 
                                        (pin.attr("y") + pinYpointer)/ zoomLevel());
        // Calcul de l'endroit ou placer l'épingle dans l'ensemble d'épingles composant la zone
        var index = getArrayIndex(zones[selectedZoneCursor].pins, newPin);
        // Insertion de la nouvelle épingle dans celles composant la zone
        zones[selectedZoneCursor].pins.splice(index, 0, newPin);
    }
    else
    {
        epingles.push(new Epingle(pin, (pin.attr("x") + pinXpointer)/ zoomLevel() - mapXmove, (pin.attr("y") + pinYpointer)/ zoomLevel() - mapYmove));
    }
    selectPin(pin);
}

function getPinImage()
{
    var url = context + "/img/";
    if(epingles.length == 0 && editMode == false)
    {
        url += "first_epingle.png";
    }
    else
    {
        url += "epingle.png";
    }
    return url;
}

function makeZoneEditable()
{
    // Faire disparaitre polygone
    zones[selectedZoneCursor].objet.remove();
    // Faire apparaître épingles
    for(i in zones[selectedZoneCursor].pins)
    {
        zones[selectedZoneCursor].pins[i].objet.show();
    }
    // TODO Faire apparaître stroke
    
}

//function switchStroke(mode)
//{
//    for(i in tempStroke)
//    {
//        if(mode == "on")
//        {
//            tempStroke[i].show();
//        }
//        else
//        {
//            tempStroke[i].hide();
//        }  
//    }
//}

function getArrayIndex(array, insertPin)
{
    if(array.length > 1 )
    {
        var proxX = 0;
        var proxY = 0;
        var bestProx = mapWidth*4;
        var index = 0;
        var indexSup = 0;
        var indexInf = 0;

        for(i in array)
        {
            proxX = Math.abs(array[i].x - insertPin.x);
            proxY = Math.abs(array[i].y - insertPin.y);
            if((proxX + proxY) < bestProx)
            {
                index = i*1;
                bestProx = proxX + proxY;
            }
        }

        indexSup = index + 1;
        indexInf = index - 1;

        if(indexInf < 0)
        {
            indexInf = array.length - 1;
        }
        if(indexSup >= array.length)
        {
            indexSup = 0;
        }

        if(Math.abs(array[indexInf].x - insertPin.x) + Math.abs(array[indexInf].y - insertPin.y) 
            <  Math.abs(array[indexSup].x - insertPin.x) + Math.abs(array[indexSup].y - insertPin.y))
        {
            return indexInf + 1;
        }
        else
        {
            if(indexSup == 0)
            {
                indexSup = array.length;
            }
            return indexSup;
        }
    }
}

function pinSort(pinIndex, array)
{
    if(pinIndex != 0)
    {
        // Récupération de l'épingle à déplacer
        var pin = array[pinIndex];
        // Suppression de l'épingle dans le tableau
        array.splice(pinIndex, 1);
        // Récupération de sa position
        var newIndex = getArrayIndex(array, pin);
        if(newIndex == 0)
        {
            newIndex = 1;
        }
        // Réinsertion dans le tableau
        array.splice(newIndex, 0, pin);
    }
}

function getDisplayedZonesLength()
{
    var count = 0;
    for(i in zones)
    {
        if(zones[i].removed == false)
        {
            count++;
        }
    }
    return count;
}

function selectPin(pin)
{
    
    var first = false;
    var url;
    
    if((getDisplayedZonesLength()>0 && editMode == true && zones[selectedZoneCursor].pins[0].objet == pin) || (epingles.length>0 && epingles[0].objet == pin))
    {
        first = true;
    }
    
    if(pin == selectedPin)
    {
//        if($("#pinMenu").css("display") != "none")
        selectedPin = null;
        if(first)
        {
            url = context + "/img/first_epingle.png"
        }
        else
        {
            url = context + "/img/epingle.png";
        }
    }
    else
    {
        if(selectedPin != null)
        {
            selectPin(selectedPin);
        }
        selectedPin = pin;
        if(first)
        {
            url = context + "/img/first_epingle_selected.png"
        }
        else
        {
            url = context + "/img/epingle_selected.png";
        }
    }
    
    pin.attr({
        src: url
    });            
}

function addZoneMenu(zoneBean)
{
    var indexZoneInAccordion = (parseInt(selectedZoneCursor) + parseInt(1));
    var indexZone = parseInt(indexZoneInAccordion-1);
    // Gestion de remplissage des champs du formulaire
    var designation = zoneBean.designation;
    var details = zoneBean.details;
    var comm = zoneBean.commentaires;
    var attributionsTab = zoneBean.attributions;
    var attributionsForm = "";
    for(i in attributionsTab)
    {
        attributionsForm += "<option>" + attributionsTab[i] + "</option>";
    }
    var options = zoneBean.places;
    var onchangeForPlaces = 'onchange="enableButton(zoneForm'+ indexZoneInAccordion +'.saveZoneBtn)"';
    for(j=1; j<=10; j++)
    {
        options += "<option>" + j + "</option>";
    }
//    if(attributionsTab.length > 0)
//    {
        options = "<option>" + zoneBean.places + "</option>";
        onchangeForPlaces = "";
//    }
    
    $('#accordion').append(
        '<h3 onclick="activateZoneOverAll(zones[' + indexZone + '].objet);">\n\
            <a href="#">Zone ' + indexZoneInAccordion + '</a>\n\
        </h3>\n\
            <div class="detailsMenu">\n\
                <form id="zoneForm'+ indexZoneInAccordion + '" method="POST">\n\
                    <p>\n\
                        <label for="designation">Designation </label>\n\
                        <input type="text" id="designation" value="' + designation + '" onkeydown="enableButton(zoneForm'+ indexZoneInAccordion +'.saveZoneBtn)" />\n\
                    </p>\n\
                    <p>\n\
                        <label for="details">Details </label>\n\
                        <input type="text" id="details" value="' + details + '" onkeydown="enableButton(zoneForm'+ indexZoneInAccordion +'.saveZoneBtn)" />\n\
                    </p>\n\
                    <p>\n\
                        <label for="places">Places disponibles</label>\n\
                        <select id="places" ' + onchangeForPlaces + '>' + options + '</select>\n\
                    </p>\n\
                    <p>\n\
                        <label for="comm">Commentaires </label>\n\
                        <textarea id="comm" onkeydown="enableButton(zoneForm'+ indexZoneInAccordion +'.saveZoneBtn)" >' + comm + '</textarea>\n\
                    </p>\n\
                    <p>\n\
                        <label for="attributions">Attributions</label>\n\
                        <select id="attributions">' + attributionsForm + '</select>\n\
                    </p>\n\
                    <p>\n\
                        <input id="saveZoneBtn" disabled="true" type="button" onclick="updateBean(zones[' + indexZone + '].bean, this.form)" value="Enregistrer"/>\n\
                    </p>\n\
                </form>\n\
            </div>').accordion('destroy').accordion();
}

function updateBean(zoneBean, form)
{
    form.saveZoneBtn.disabled = "true"; 
    zoneBean.designation = form.designation.value;
    zoneBean.details = form.details.value;
    zoneBean.commentaires = form.comm.value;
    zoneBean.places = form.places.value;
    zoneInsertRequest(zoneBean);
}

function activateZoneOverAll(zoneObjet)
{
    if(selectedZoneCursor != null)
    {
        setZoneUnselected(false, zones[selectedZoneCursor].objet);
    }
    if(zoneObjet != null)
    {
        setZoneSelected(zoneObjet);
    }
}

function removeZoneMenu(zoneIndex)
{
    $('#accordion').children("h3:eq(" + zoneIndex + ")").children("a:eq(0)").css("background-image", "url(" + context + "/css/image/removedBg.png)");
    $('#accordion').children("h3:eq(" + zoneIndex + ")").children("a:eq(0)").attr("class", "removed");
    $('#accordion').children("div:eq(" + zoneIndex + ")").empty();
    
    openAccordionElement(parseInt(MAP_ACCORDION_INDEX));
}

function openAccordionElement(numZone)
{
    $('#accordion').accordion("activate", parseInt(numZone));
}

function createXmlHttpRequest()
{
    if(window.ActiveXObject)
    {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest)
    {
        xmlHttp = new XMLHttpRequest();
    }
    
}

function mapInsertRequest(form)
{
    var params;
    var insert = false;
    
    if(mapBean == null)
    {
        xmlHttp.open("POST", "http://localhost:8084/Doodle/Map/add", true);
        params = "designation=" + form.designation.value + "&dateMax=" + form.dateMax.value;
        insert = true;
    }
    else
    {
        xmlHttp.open("POST", "http://localhost:8084/Doodle/Map/update", true);
        params = "idCarte=" + mapBean.id + "&designation=" + form.designation.value + "&dateMax=" + form.dateMax.value;
    }
    
    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState == 4)
        {
            if(xmlHttp.status == 200)
            {
                if(insert)
                {
                    var carteXml = xmlHttp.responseXML.getElementsByTagName("carte")[0];
                    mapBean = new MapBean(  carteXml.getElementsByTagName("idCarte")[0].textContent, 
                                        carteXml.getElementsByTagName("designation")[0].textContent, 
                                        carteXml.getElementsByTagName("dateMax")[0].textContent);
                }
            }
            else
            {
                alert("Probleme d'insertion dans la base de donnees");
            }
        }
    };

    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8"); 
    xmlHttp.send(params);
    
    form.saveMapBtn.disabled = true;
}

function zoneInsertRequest(zoneBean)
{
    var params;
    var insert = false;
    
    if(zoneBean.id == -1)
    {
        xmlHttp.open("POST", "http://localhost:8084/Doodle/Zone/add", true);
        params = "designation=" + zoneBean.designation + "&details=" + zoneBean.details + "&commentaires=" + zoneBean.commentaires
                + "&path=" + zoneBean.path + "&idCarte=" + mapBean.id;
        insert = true;
    }
    else
    {
        xmlHttp.open("POST", "http://localhost:8084/Doodle/Zone/update", true);
        xmlHttp.overrideMimeType("text/html; charset=UTF-8");
        params = "idZone=" + zoneBean.id + "&designation=" + zoneBean.designation + "&details=" + zoneBean.details + "&commentaires=" + zoneBean.commentaires
                 + "&idCarte=" + mapBean.id;
             
    }
    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState == 4)
        {
            if(xmlHttp.status == 200)
            {
                if(insert)
                {
                    var zoneXml = xmlHttp.responseXML.getElementsByTagName("zone")[0];
                    getZoneFromBean(zoneBean).bean = new ZoneBean(  zoneXml.getElementsByTagName("idZone")[0].textContent, 
                                            zoneXml.getElementsByTagName("designation")[0].textContent, 
                                            zoneXml.getElementsByTagName("details")[0].textContent,
                                            zoneXml.getElementsByTagName("commentaires")[0].textContent, 
                                            zoneXml.getElementsByTagName("path")[0].textContent,
                                            "true",
                                            new Array(),
                                            zoneXml.getElementsByTagName("places")[0].textContent
                                        ); 
                }
            }
            else
            {
                alert("Problème d'insertion dans la base de données");
            }
        }
    };
    
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");
    xmlHttp.send(params);
}

function zonePositionUpdateRequest(zoneBean)
{
    var params;
    
    xmlHttp.open("POST", "http://localhost:8084/Doodle/Zone/updatePosition", true);
    params = "idZone=" + zoneBean.id + "&path=" + zoneBean.path + "&idCarte=" + mapBean.id;
    
    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState == 4)
        {
            if(xmlHttp.status != 200)
            {
                alert("Probleme de mise a jour de la base de donnees");
            }
        }
    };

    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8"); 
    xmlHttp.send(params);
}

function zoneRemoveRequest(indexZone)
{
    xmlHttp.open("POST", "http://localhost:8084/Doodle/Zone/delete", true);
    var params = "idZone=" + zones[indexZone].bean.id + "&idCarte=" + mapBean.id;
    
    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState == 4)
        {
            if(xmlHttp.status != 200)
            {
                alert("Probleme avec la suppression de la zone, veuillez raffraichir la page");
            }
        }
    };

    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8"); 
    xmlHttp.send(params);
}

function enableButton(button)
{
    if(button.disabled)
    {
        button.disabled = false;
    }
}

function loadData(data)
{
    console.log(data);
    checkButton(true);
    // Récupération de la carte
    var carteStructure = data.getElementsByTagName("carte")[0];
    var carteId = carteStructure.getElementsByTagName("idCarte")[0].textContent;
    mapFilePath = carteStructure.getElementsByTagName("path")[0].textContent;
    var carteDesignation = carteStructure.getElementsByTagName("designation")[0].textContent;
    var carteDateMax = carteStructure.getElementsByTagName("dateMax")[0].textContent;
    mapBean = new MapBean(carteId, carteDesignation, carteDateMax);

    $("#mapForm  #designation").attr({value : carteDesignation});
    $("#mapForm  #dateMax").attr({value : carteDateMax});
    
    var zonesStructure = carteStructure.getElementsByTagName("zones")[0].childNodes;
    for(var i=0; i<zonesStructure.length; i++)
    {
        // Récupération des zones
        var zoneId = zonesStructure[i].getElementsByTagName("idZone")[0].textContent;
        var zoneDesignation = zonesStructure[i].getElementsByTagName("designation")[0].textContent;
        var zoneDetails = zonesStructure[i].getElementsByTagName("details")[0].textContent;
        var zoneComm = zonesStructure[i].getElementsByTagName("commentaires")[0].textContent;
        var dispo = zonesStructure[i].getElementsByTagName("disponibilite")[0].textContent;
        var places = zonesStructure[i].getElementsByTagName("places")[0].textContent;
        var color = zoneDispocolorCode;
        var attributions = new Array();
        if(dispo == "false")
        {
            color = zoneNotDispocolorCode;   
            var attributionsResults = zonesStructure[i].getElementsByTagName("attributions")[0].getElementsByTagName("etudiant");
            for(var k=0; k<attributionsResults.length; k++)
            {
                attributions.push(attributionsResults[k].textContent);
            }
        }
        var pinsStructure = zonesStructure[i].getElementsByTagName("epingles")[0].childNodes;
        
        for(j=0; j<pinsStructure.length; j++)
        {
            // Récupération des épingles
            var pinX = pinsStructure[j].getElementsByTagName("x")[0].textContent;
            var pinY = pinsStructure[j].getElementsByTagName("y")[0].textContent;
            createPin(parseInt(pinX - pinXpointer),parseInt(pinY - pinYpointer));
        }
        var zonePath = extractGraphicPath(epingles);
        var polygon = drawPolygon(zonePath, color);
        var zoneBean = new ZoneBean(zoneId, zoneDesignation, zoneDetails, zoneComm, zonePath, dispo, attributions, places);
        transformPinsToZone(polygon, epingles);
        createZone(polygon, zoneBean);
    }
    checkButton(false);
    if(selectedZoneCursor != null)
    {
        setZoneUnselected(true, zones[selectedZoneCursor].objet);
    }
}

function xmlFromString(body) 
{ 
    // code for IE 
    if (window.ActiveXObject) 
        { 
        var doc=new ActiveXObject("Microsoft.XMLDOM"); 
        doc.async="false"; 
        doc.loadXML(body); 
        } 
    // code for Mozilla, Firefox, Opera, etc. 
    else 
        { 
        var parser=new DOMParser(); 
        var doc=parser.parseFromString(body,"text/xml"); 
        } 
    return doc;     
} 

function getZoneFromBean(zoneBean)
{
    for(z in zones)
    {
        if(zones[z].removed == false)
        {
            if(zones[z].bean == zoneBean)
            {
                return zones[z];
            }
        }
    }
    return null;
}

function checkButton(checked)
{
    if(checked)
    {
        var parent = $(".cb-enable").parents('.switch');
        $('.cb-disable',parent).removeClass('selected');
        $(".cb-enable").addClass('selected');
        $('.checkbox',parent).attr('checked', true);
        createMode = true;
    }
    else
    {
        var parent = $(".cb-disable").parents('.switch');
        $('.cb-enable',parent).removeClass('selected');
        $(".cb-disable").addClass('selected');
        $('.checkbox',parent).attr('checked', false);
        createMode = false;
    }
}